<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初识Vue</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>

    
</head>
<body>
    <!-- 
        初始 Vue：
            1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象
            2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
            3.root容器里的代码被称为【Vue模板】;
            4.Vue实例和容器是一一对应的；
            5.真实开发中，只有一个Vue实例，并且会配合着组件一起使用
            6.{{xx}}中的xx要写js表达式，且 xx 可以自动读取到data中的所有属性；
            7.一旦data中的数据发生改变，那么页面中的用到该数据的地方也会自动更新；



        注意区分：js表达式 和 js代码（语句）
            1.表达式：一个表达式会生成一个值，可以放在任何一个需要值的地方：
             (1). a
             (2). a+b
             (3). demo(1)
             (4). x === y ? 'a' : 'b'

        2.js代码（js语句）
             (1). if(){}
             (2). for(){}

     -->

     <!-- 准备好一个容器 -->
    <div id="root">
        <h1>Hello {{name}}，{{address}},{{Date.now()}},{{1+2}} </h1>
    </div>
 

    <script type="text/javascript">
        Vue.config.productionTip =false; //阻止 vue 在启动时生成生产提示。

        // 创建Vue实例
        new Vue({
            el:'#root' ,  // el 用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
            data:{  // data中用于存储数据，数据供 el 所指定的容器使用，值暂时为对象
                name:"Vue框架",
                address:'湖南长沙'
            }
        });
        
        
    </script>
    
</body>
</html>